<template>
  <div id="container"></div>
</template>

<script setup>
import { onMounted } from 'vue';
import * as Cesium from 'cesium';
import './Widgets/widgets.css';

// 设置cesium 静态资源路径
window.CESIUM_BASE_URL = '/';

// 天地图 官网申请的key https://console.tianditu.gov.cn/api/key
const webKey = '01fc395160d8eb3b82aefe65b2280e58';

Cesium.Ion.defaultAccessToken =
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmNDkwYWVhOS0wNzI5LTQ3OTEtOWFiMC1kY2M3MTFiM2I2NWQiLCJpZCI6MTkyNTU1LCJpYXQiOjE3MDY1MTM0MTh9.YAPVHr1d7PBuWayCXM9deCxKg3AbtsXUJiVpubVS3NY';

onMounted(async () => {
  // 地球视图，底图加载
  const viewer = new Cesium.Viewer('container', {
    //设置地形
    terrainProvider: Cesium.createWorldTerrain({
      requestWaterMask: true, // 水纹效果  海里面有波浪的效果
      requestVertextNormal: true, // 光照效果
    }),

    //信息窗口
    infoBox: false,
  });

  //隐藏cesium Icon-logo
  viewer.cesiumWidget.creditContainer.style.display = 'none';

  // const material= Cesium.Color.RED

  // 发光飞线 https://cesium.com/learn/cesiumjs/ref-doc/PolylineGlowMaterialProperty.html?classFilter=PolylineGlowMaterialProperty
  const material = new Cesium.PolylineGlowMaterialProperty({
    glowPower: 0.2, // 发光效果
    taperPower: 0.7, // 总长度的百分之多少时，变成1px
    color: Cesium.Color.RED,
  });
  // 箭头
  // const material = new Cesium.PolylineArrowMaterialProperty(Cesium.Color.RED);
  // 虚线
  // const material = new Cesium.PolylineDashMaterialProperty({
  //   color: Cesium.Color.RED,
  //   dashLength: 10,
  // });

  var lineEntity = viewer.entities.add({
    name: 'Line Entity',
    polyline: {
      positions: Cesium.Cartesian3.fromDegreesArray([-75, 35, -125, 35]),
      width: 20,
      material: material,
    },
  });

  // 设置相机位置
  viewer.camera.setView(viewer.scene);
});
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}
#container {
  height: 94vh;
  width: 94vw;
}
</style>
